<template>
	<view>
		<view class="logo">
			<image src="../../static/img/login/login_logo.png" mode=""></image>
		</view>
		<u--form labelPosition="left" :model="login" class="input" :rules="rules" ref="loginForm"
			:errorType="errorType">
			<u-form-item prop="account">
				<u--input v-model="login.account" placeholder="用户名" border="surround" clearable
					class="uname"></u--input>
			</u-form-item>
			<u-form-item prop="password">
				<u--input v-model="login.password" placeholder="请输入密码" border="surround" clearable password></u--input>
			</u-form-item>
		</u--form>
		<view class="btn" @click="handleLogin">登录</view>
		<view class="tips">
			<view class="forget">忘记密码?</view>
			<view class="register">注册</view>
		</view>
		<u-divider text="其他登录方式" class="line"></u-divider>
		<view class="other">
			<view class="weixin">
				<image src="../../static/img/login/weixin.png" mode=""></image>
				<view class="title">微信</view>
			</view>
			<view class="weixin">
				<image src="../../static/img/login/qq.png" mode=""></image>
				<view class="title">QQ</view>
			</view>
			<view class="weixin">
				<image src="../../static/img/login/weibo.png" mode=""></image>
				<view class="title">微博</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { base } from '@/api/index.js';
	export default {
		data() {
			return {
				login: {
					account: "",
					password: "",
				},
				rules: {
					account: [{
						required: true,
						message: '请填写用户名！',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请填写密码！',
						trigger: ['blur', 'change']
					}]
				},
				errorType: 'message',
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate().then(async res => {
					if (res) {
						let { status, msg, data } = await base.login(this.login);
						if (status === 200) {
							let token = data.token;
							uni.setStorageSync('token', token);
							let URL = uni.getStorageSync('URL');
							// 判断是否需要使用 switchTab 进行跳转
							let isTabBarPage = this.checkIfTabBarPage(URL);
							if (isTabBarPage) {
								// 使用 uni.switchTab 方法跳转页面
								uni.switchTab({
									url: URL,
								});
							} else {
								// 使用 uni.navigateTo 方法跳转页面
								console.log(URL);
								uni.navigateTo({
									url: URL,
								});
							}
						} else {
							uni.showToast({
								title: msg,
								icon: 'error',
								duration: 2000
							});
						}
					}

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			},
			// 检查页面是否在底部导航栏中存在
			checkIfTabBarPage(url) {
				// 底部导航栏页面的路径列表
				const tabBarPages = ['/pages/index/index', '/pages/selection/selection', '/pages/category/category',
					'/pages/cart/cart', '/pages/user/center/center'
				];
				return tabBarPages.includes(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		text-align: center;

		image {
			width: 120rpx;
			height: 125rpx;
			margin-top: 135rpx;
			margin-bottom: 196rpx;
		}
	}

	.input {
		width: 670rpx;
		margin: 0 auto;
		margin-bottom: 58rpx;
	}

	.btn {
		width: 670rpx;
		height: 106rpx;
		background-color: #c55a5c;
		color: white;
		text-align: center;
		line-height: 106rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		margin-bottom: 39rpx;
		font-size: 28rpx;
	}

	.tips {
		width: 670rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #aaaaaa;
		margin: 0 auto;
		margin-bottom: 93rpx;
	}

	.line {
		width: 670rpx;
		margin: 0 auto;
		margin-bottom: 58rpx;
	}

	.other {
		width: 383rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.weixin {
			text-align: center;

			image {
				width: 45rpx;
				height: 37rpx;
			}

			.title {
				font-size: 28rpx;
				color: #555555;
			}
		}
	}
</style>